<template>
    <div>
        房型名称:
        <input type="text" v-model="queryInfo.name">
        <input type="button"  value="查询" @click="show">
        <table class="table table-bordered" >
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>单价</td>
                    <td>室内面积</td>
                    <td>最多入住人数</td>
                    <td>图片</td>
                    <td>房型描述</td>
                    <td>是否有窗</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.id">
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ item.mian }}</td>
                    <td>{{ item.ren }}</td>
                    <td><img :src="item.tu" width="100" height="100"></td>
                    <td>{{ item.miao }}</td>
                    <td>{{ item.shi?'是':'否' }}</td>
                    <td>
                        <input type="button" value="编辑" @click="upd(item.id)">
                        <input type="button" value="删除" @click="shan(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>总共{{ data.totaCount }}条</span>
            <span>每页{{ queryInfo.pageSize }}条</span>
            <span>当前{{ queryInfo.pageIndex }}/{{ data.totaPage }}</span>
            <input type="button" value="首页" @click="goPage(1)" />
            <input type="button" value="上一页" @click="goPage(queryInfo.pageIndex-1)" />
            <input type="button" value="下一页" @click="goPage(queryInfo.pageIndex+1)" />
            <input type="button" value="尾页" @click="goPage(data.totaPage)" />
            
      <input type="number" v-model="queryInfo.pageIndex" />
      <input type="button" value="跳转" @click="goPage(queryInfo.pageIndex)" />

      <select v-model="queryInfo.pageSize" @change="show">
        <option :value="item" v-for="item in arr" :key="item">
          每页显示{{ item }}条
        </option>
      </select>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import axios from 'axios';
import {reactive,ref,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
let arr = ref([2, 4, 6, 8]);
let queryInfo=reactive({
    pageIndex:1,
    pageSize:2,
    name:''
});
onMounted(()=>{
    show();
})

let data: any = reactive({
  list: [],
  totaCount: 0,
  totaPage: 0,
});

const show=()=>{
    axios({
        url:'https://localhost:7203/api/FangXing/Show',
        method:'get',
        params:queryInfo
    })
    .then((res)=>{
        console.log(res);
        data.list=res.data.list;
        data.totaCount=res.data.totaCount;
        data.totaPage=res.data.totaPage;
    })
    .catch((err)=>{
        console.log(err);
    })
}
const shan=(id:any)=>{
    var f=("确认要删除吗？");
    if(f){
        axios({
            url:'https://localhost:7203/api/FangXing/Shan',
            method:'delete',
            params:{
                id:id
            }
        })
        .then((res)=>{
            console.log(res);
            alert("删除成功!");
            show();
        })
        .catch((err)=>{
            console.log(err);
        })
    }
};
const upd=(id:any)=>{
    router.push({
        path:'fangxingupd',
        query:{
            id:id,
        }
    })
}
const goPage = (num: any) => {
  if (num < 1) {
    queryInfo.pageIndex = 1;
    return;
  }
  if (num > data.totalPage) {
    queryInfo.pageIndex = data.totalPage;
    return;
  }
  queryInfo.pageIndex = num;
  show();
};
</script>

<style scoped>

</style>